<!DOCTYPE html><!-- 可以使用h5标签-->
<html lang="en">
<!--
        html：超文本标记语言 html是用来写前端页面。
        html是不需要编译的，只需要有一个浏览器，html文件就能运行
        结构：html页面最外一层使用html标签包着
        head标签：头部  
        <meta> 用来设置页面相关的一些元数据
        <title></title>：浏览器页面的标题标签

    -->

<head>
    <meta charset="UTF-8">
    <!--href:指定图标的位置 咱们一定要写相对路径-->
    <link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon">
    <title>标题</title>
    <!--引入css文件 href：css文件的路径-->
    <link rel="stylesheet" href="">
    <!--引入js文件 src：javascript的路径-->
    <script src=""></script>
</head>
<!--在浏览器上显示的内容全部都需要写在body里面-->

<body>
    <!--在浏览一个网页的时候，网页上的内容主要是文字和图片-->
    <!--文字标签  html的标签基本上是双标签 <开始标签></结束标签>-->
    <!--在开始标签中还可能存在相应的属性-->
    <!-- html标签不区分大小写，编码规范建议全部使用小写来书写页面 -->
    <!-- 标题标签 -->
    <a id="name">顶部</a>
    <h1 id="top">这个是h1标签</h1>
    <h2>这个是h2标签</h2>
    <h3>this is h3 tag</h3>
    <h4>this is h4 lable</h4>
    <h5>this is h5 tag</h5>
    <h6>this is h6 lable</h6>
    <!-- 段落标签 -->
    <p>这个是一个段落标签</p>
    <!-- 字体加粗标签 -->
    <p><strong>字体加粗标签</strong></p>
    <p><b>字体加粗标签</b></p>
    <p><b>字体加粗标签</b></p>
    <!-- 字体斜体 -->
    <p><i>字体斜体</i></p>
    <!-- 字体的强调标签 -->
    <p><span>这个是一个强调标签</span></p>
    <font>这个是字体标签</font>
    <font>这个是字体标签</font>
    <!-- 
        html标签的分类 
             快标签：独占一行。也即是一个标签显示一行
             行标签：所有的标签内容在一行显示，除非是在这一行显示不下，才会换行显示。
    -->
    <!-- 需要使用右键打开浏览器 在扩展里面安装open in browser插件-->
    <!-- 安装 HTML CSS Support 插件 -->
    <!--安装 Eclipse Keymap 插件 vscode的快捷键和eclipse一样-->
    <!-- vscode里面也可以写java代码，要求jdk必须是11以上 -->

    <!-- 
        图片标签是一个单标签,行标签  
            src：设置图片的路径 路径写相对路径
            alt：当图片加载失败显示的提示语
            title：图片的提示语
            width：等比例缩放
    -->
    <img src="image/pic.jpg" alt="哈哈哈哈" title="这个是一张京剧图片">
    <img src="C:\Users\Lenovo\Desktop\pic.jpg" alt="哈哈哈哈">


    <!-- 水平线 -->
    <hr>
    <!-- 换行符 -->
    <br>
    <!-- 标签的属性值一般使用双引号引起来的。如果属性值里面还有双引号，使用单引号 -->
    <!-- 
        因为html标签使用的是尖括号包着的所以在标签中的文本里面不能直接写 '<'获取'>'' 
        '<' : &lt;
        '>' : &gt;
        '&' : &amp;
        '"' : &quot;
        '©' : &copy
    -->
    <p>ksjcajscajsc&amp;lt;zdc&copysdvs</p>




    <!-- 
        超链接 页面的跳转 行标签
        a标签：双标签
        href：当你点击a标签后跳转的路径 a标签请求是get请求
        默认在当前页打开这个连接
        target="" 设置其它位置打开这个连接
        _blank:在新窗口打开该链接
        _self:在本窗口打开超链
        _parent:在父窗口打开
        _top:在顶部打开超链接

        锚点的实现
            利用a标签的name属性
            <a name="top"></a>
            ⼀般标签的id属性
            <div id="top"></div>、<a id="top"></a>

            超链接的写法：
            <a href="#top"></a>

    -->
    <a href="https://www.baidu.com" target="_self">百度一下</a>
    <a href="#name">返回顶部</a>

    <!-- 
        面试题
            a标签是怎么实现页面的跳转？
            答案：通过href来实现页面的跳转
     -->


     <!-- 
        标签的分类 
            HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
            块级元素
              元素都从新的⼀⾏开始，并且其后的元素也另起⼀行；元素的⾼度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和⽗元素的宽度⼀致），
              除非设定⼀个宽度。
            行内元素
              和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；
              元素的宽度就是它包含的文字或图片的宽度，不可改变。
            行内块状元素
              和其他元素都在⼀行上；元素的高度、宽度、行高以及顶和底边距都可设置。
    -->

    <!--
        html标签：相当于是人类的骨架，设置的显示的内容
        css: 相当于是人类皮肤和衣服。设置内容该如何显示，是用来装饰页面的。
        javascript：人类的动作。相当于可以让页面动起来，可以实现一些事件，动态给页面添加/删除/更新/查询页面的内容。


        css：重叠样式表  css文件是以.css结尾
        css的位置：
          内嵌样式：内嵌到html标签里面  style="css样式"
          内部样式表：css样式是写在head标签里面的style标签里面
          外部样式表: css样式是写在一个css文件中，
            在head里面通过 <link rel="stylesheet" href="">引入css文件


        对于内嵌样式是定义在标签里面的，所以样式解析出来以后，浏览器知道其作用在那个标签里面
        对于内部样式表和外部样式表需要通过css选择器来指定该样式作用在哪些标签上

        css样式：格式：样式名:样式值;
        通用选择器：  *{ css样式}
        ID选择器: #id名{css样式}   id定义在标签里面，是作为属性存在，在同一个页面的id值是唯一的。
        class选择器: .class名{css样式}  class定义在标签里面，是作为属性存在，在同一个页面的class值是可以重复的
        元素/标签选择器： 标签名{css样式}
    -->


    <!-- 
        序列标签 
            无序标签
            <ul>
                <li></li>
            </ul>
            默认的样式是实心圆，可以设置其它的一些自带样式
            type： 在ul里面添加type属性
            square：小方框
            circle：空心圆
            disc：实心圆
            也可以设置自定义样式（css实现）
            有序标签
            <ol>
                <li></li>
            </ol>

            type：A 大写字母的ABCD
                  a 小写的ABCD
                  i 罗马数字的小写
                  I 罗马数字的大写
            自定义标签
    -->
    <!-- 无序标签 -->
    <ul type="disc">
        <li>为请问请问</li>
        <li>为请问请问</li>
        <li>为请问请问</li>
        <li>为请问请问</li>
        <li>为请问请问</li>
    </ul>

    <ol>
        <li>我去恶趣味请问</li>
        <li>我去恶趣味请问</li>
        <li>我去恶趣味请问</li>
        <li>我去恶趣味请问</li>
    </ol>

    <dl>
        <dt>123123</dt>
        <dd>asdasd</dd>
        <dd>asdasd</dd>
        <dd>asdasd</dd>

        <dt>123123</dt>
        <dd>asdasd</dd>
        <dd>asdasd</dd>
        <dd>asdasd</dd>
    </dl>

    <!-- 表格 -->
    <table>
        <tr>
            <td>qwe</td>
            <td>qwe</td>
            <td>qwe</td>
            <td>qwe</td>
        </tr>
        <tr>
            <td>qwe</td>
            <td>qwe</td>
            <td>qwe</td>
            <td>qwe</td>
        </tr>
        <tr>
            <td colspan="合并的列" rowspan="合并行">qwe</td>
            <td>qwe</td>
            <td>qwe</td>
            <td>qwe</td>
        </tr>
    </table>
</body>
<!-- 浏览器的内核 -->


</html>